<template>
  <div>
    <!-- 轮播图 -->
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="3000"
      controls
      indicators
      fade
      background="#ababab"
      img-width="1024"
      img-height="380"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
      >

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

            <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

            <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>
    <b-container>
      <b-row>
        <!-- card内容部分 -->
        <b-col sm="9">
          <div>
            <b-card-group columns>
              <b-card
                title="Card title that wraps to a new line"
                img-src="https://placekitten.com/g/400/450"
                img-alt="Image"
                img-top
                >
                <b-card-text>
                  This is a wider card with supporting text below as a natural lead-in to additional content.
                  This content is a little bit longer.
                </b-card-text>
              </b-card>

              <b-card
                title="Card title that wraps to a new line"
                img-src="https://placekitten.com/g/400/450"
                img-alt="Image"
                img-top
                >
                <b-card-text>
                  This is a wider card with supporting text below as a natural lead-in to additional content.
                  This content is a little bit longer.
                </b-card-text>
              </b-card>

              <b-card
                title="Card title that wraps to a new line"
                img-src="https://placekitten.com/g/400/450"
                img-alt="Image"
                img-top
                >
                <b-card-text>
                  This is a wider card with supporting text below as a natural lead-in to additional content.
                  This content is a little bit longer.
                </b-card-text>
              </b-card>

              <b-card header="Quote">
                <blockquote class="blockquote mb-0">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer class="blockquote-footer">
                    Someone famous in <cite title="Source Title">Source Title</cite>
                  </footer>
                </blockquote>
              </b-card>

              <b-card title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
                <b-card-text>
                  This card has supporting text below as a natural lead-in to additional content.
                </b-card-text>
                <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
              </b-card>

              <b-card bg-variant="primary" text-variant="white">
                <blockquote class="card-blockquote">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer>
                    <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                  </footer>
                </blockquote>
              </b-card>

              <b-card>
                <b-card-title>Title</b-card-title>
                <b-card-text>
                  This card has supporting text below as a natural lead-in to additional content.
                </b-card-text>
                <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
              </b-card>

              <b-card img-src="https://picsum.photos/400/400/?image=41" img-alt="Image" overlay></b-card>

              <b-card img-src="https://picsum.photos/400/200/?image=41" img-alt="Image" img-top>
                <b-card-text>
                  This is a wider card with supporting text below as a natural lead-in to additional content.
                  This card has even longer content than the first.
                </b-card-text>
                <template v-slot:footer>
                  <small class="text-muted">Footer Text</small>
                </template>
              </b-card>
            </b-card-group>
          </div>
        </b-col>
        <!-- 侧边部分 -->
        <b-col sm="3">
          <!-- 个人名片 -->
          <div>
            <b-card
              img-src="https://picsum.photos/600/300/?image=25"
              img-alt="Image"
              img-top
              tag="article"
              class="mb-2"
            >
              <b-avatar src="https://placekitten.com/300/300" rounded></b-avatar>
              Tankk
              <b-card-text>
                向来心是看客心,奈何人是剧中人
              </b-card-text>
            </b-card>
          </div>
          <div>
            <!-- tag标签栏 -->
            <b-card title="Tag" class="mb-2">
              <b-button v-for="(tag,index) in tags" :key="index" :variant="tagsColor (index)" size="sm">{{tag}}</b-button>
            </b-card>
          </div>

        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 轮播图配置
      slide: 0,
      sliding: null,

      // 随机色数组
      tagcolor: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'],
      tags: ['Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark', 'Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark', 'Primary']
    }
  },

  methods: {
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    },
    // tag随机色 随机数实现
    tagsColor (index) {
      var i = Math.round((index + 5) * 33 / 22)
      return this.tagcolor[i % 8]
    }

  },
  computed: {

  }
}
</script>

<style lang="less" scoped>
.btn-sm {
  margin:.1rem!important;
}
.container {
  margin-top:1rem;
}

</style>
